<template>
	<view>
		<u-cell-group>
			<u-cell-item value="头像修改" :center="true" @click="avatarPop=true">
				<u-avatar :src="user.full_portrait" slot="title"></u-avatar>
			</u-cell-item>
			<u-cell-item title="昵称" :value="user.nickname" @click="nicknamePop=true"></u-cell-item>
		</u-cell-group>

		<u-popup v-model="avatarPop" mode="center" border-radius="16" width="560" height="300">
			<view class="padding flex-col justify-between align-center" style="height: 100%;">
				<u-upload :show-progress="false" upload-text="修改头像" :action="$store.state.upload" :file-list="fileList" :header="header"
				 :form-data="{type: 'portrait'}" :max-count="1" @on-success="success"></u-upload>
			</view>
		</u-popup>

		<u-popup v-model="nicknamePop" mode="center" border-radius="16" width="560" height="300">
			<view class="padding flex-col justify-between" style="height: 100%;">
				<u-field label="昵称" placeholder="修改昵称" v-model="nickname"></u-field>
				<my-btn gold size="sm" @click="cgName">修改</my-btn>
			</view>
		</u-popup>
		<u-popup v-model="qqPop" mode="center" border-radius="16" width="560" height="300">
			<view class="padding flex-col justify-between" style="height: 100%;">
				<u-field label="QQ" placeholder="修改qq" v-model="qq"></u-field>
				<my-btn gold size="sm" @click="cgQQ">修改</my-btn>
			</view>
		</u-popup>

		<!-- 解除并绑定微信 -->
		<u-modal v-model="unbindwxShow" show-cancel-button @confirm="unbindwx" :content="`当前账号已绑定微信号“${user.wechat}”，是否要解除绑定？`"></u-modal>
		
		<!-- 绑定微信 -->
		<u-modal v-model="bindwxShow" show-cancel-button @confirm="bindwx" :content="`是否绑定微信账号？`"></u-modal>

		<u-gap></u-gap>
		<u-cell-group>
			<u-cell-item title="账号类型" :value="user.usage==0?'个人':'企业'" :arrow="false">
				<view slot="right-icon" class="arrow-blank"></view>
			</u-cell-item>
			<u-cell-item title="账号主体" :value="accountName" @click="user.usage_status<0 && $goto('/pages/user/qiye-auth')" :arrow="user.usage_status<0">
				<view slot="right-icon" class="arrow-blank" v-if="user.usage_status>=0"></view>
			</u-cell-item>
			<u-cell-item title="实名认证" :value="user.realname||'未认证'" @click="$goto('/pages/user/realname-auth')"></u-cell-item>
			<u-cell-item title="QQ号码" :value="user.qq||'未绑定'" @click="qqPop=true"></u-cell-item>
			<u-cell-item title="微信号" :value="user.wechat||'未绑定'" @click="cgWX"></u-cell-item>
			<u-cell-item title="手机号" :value="user.mobile||'未绑定'" :arrow="false">
				<view slot="right-icon" class="arrow-blank"></view>
			</u-cell-item>
			<u-cell-item value="主页背景" :center="true" @click="chooseImage">
				<image :src="user.index_banner" style="width: 90rpx;height: 50rpx;display: block;" slot="title"></image>
			</u-cell-item>
		</u-cell-group>
		<kps-image-cutter @ok="onok" @cancel="oncancle" :url="url" :fixed="true" :width="350" :height="200" :blob="false"></kps-image-cutter>

		<u-gap></u-gap>
		<u-cell-group>
			<u-cell-item title="收货地址" @click="$goto('/pages/address/list')"></u-cell-item>
		</u-cell-group>

		<u-gap></u-gap>
		<view class="bg-white padding flex-row justify-center align-center" @click="logout">
			退出登录
		</view>
	</view>
</template>

<script>
	import store from '@/store.js'
	import kpsImageCutter from "@/components/ksp-image-cutter/ksp-image-cutter.vue";
	import { pathToBase64, base64ToPath } from '@/utils/image-tools.js'
	export default {
		components: {
			kpsImageCutter
		},
		data() {
			return {
				unbindwxShow: false,
				bindwxShow: false,
				avatarPop: false,
				header: {},
				fileList: [],
				nicknamePop: false,
				qqPop: false,
				nickname: '',
				qq: '',
				url: "",
				path: ""
			};
		},
		computed: {
			user: state => store.state.userinfo,
			accountName() {
				let { company_name, usage_status } = this.user
				let tmp = [
					{ status: -2, text: '申请企业认证' },
					{ status: -1, text: '重新认证(未通过)' },
					{ status: 0, text: company_name + '(认证中)' },
					{ status: 1, text: company_name + '(已认证)' }
				]
				let str1 = tmp.find(item => item.status==usage_status).text
				return str1
			}
		},
		onPullDownRefresh() {
			this.$u.api.getUserinfo().then(res => {
				uni.stopPullDownRefresh()
			})
		},
		mounted() {
			this.header = {
				Authorization: 'Bearer ' + this.$store.state.token
			}
			this.nickname = this.$store.state.userinfo.nickname
		},
		methods: {
			chooseImage() {
				uni.chooseImage({
					success: (res) => {
						// 设置url的值，显示控件
						this.url = res.tempFilePaths[0];
					}
				});
			},
			onok(ev) {
				this.path = ev.path;
				this.url = "";
				
				// #ifdef APP-PLUS
				pathToBase64(this.path)
				  .then(base64 => {
						this.path = base64
				    this.postImg()
				  })
				  .catch(error => {
				    console.error(error)
				  })
				// #endif
				
				// #ifndef APP-PLUS
				this.postImg()
				// #endif
			},
			postImg() {
				uni.showLoading();
				this.$u.post('/member/info/update', {
					index_banner: this.path
				}).then(res => {
					uni.hideLoading();
					this.$msg(res.data.msg);
					this.$u.api.getUserinfo();
				})
			},
			oncancle() {
				// url设置为空，隐藏控件
				this.url = "";
			},
			success() {
				this.avatarPop = false;
				this.$msg('头像修改成功');
				this.$u.api.getUserinfo();
			},
			cgName() {
				uni.showLoading();
				this.$u.post('/member/info/update', {
					nickname: this.nickname
				}).then(res => {
					uni.hideLoading();
					this.nicknamePop = false;
					this.$msg(res.data.msg);
					this.$u.api.getUserinfo();
				})
			},
			cgQQ() {
				uni.showLoading();
				this.$u.post('/member/info/update', {
					qq: this.qq
				}).then(res => {
					uni.hideLoading();
					this.qqPop = false;
					this.$msg(res.data.msg);
					this.$u.api.getUserinfo();
				})
			},
			cgWX() {
				if (this.user.wechat) {
					this.unbindwxShow = true
				} else {
					this.bindwxShow = true
				}
			},
			unbindwx() {
				this.$u.get('/member/third/unbind/wechat').then(res => {
					this.$msg(res.data.msg)
					if (res.data.code==0) {
						this.$u.api.getUserinfo()
					}
				})
			},
			bindwx() {
				uni.login({
					provider: 'weixin',
					success: res => {
						let {
							authResult,
							errMsg
						} = res
						if (errMsg == 'login:ok') {
							this.$u.post('/member/third/bind/wechat', authResult).then(res => {
								this.$msg(res.data.msg)
								if (res.data.code == 0) {
									this.$u.api.getUserinfo()
								}
							})
						}
					},
					fail: err => {
						console.log(err)
					}
				});
			},
			logout() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: res => {
						if (res.confirm) {
							this.$store.commit('userLogout');
							this.$goto('/pages/mine/index', 'tab')
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.arrow-blank {
		width: 14rpx;
	}
</style>
